<template>
	<view class="pay">
		
		<view>
			<view class="item" @click="toAddress">
				<view class="top">
					<view class="name">{{ site.name }}</view>
					<view class="phone">{{ site.phone }}</view>
					<view class="tag">
						<text v-for="(item, index) in site.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
					</view>
				</view>
				<view class="bottom">
					广东省深圳市宝安区 自由路66号
					<u-icon name="arrow-right" :size="40" color="#999999"></u-icon>
				</view>
			</view>
		
		</view>
		
		
		<view class="goods_detail">
			<view style="display: flex;">
				<image :src="goodsDetail.picture"></image>
				<view style="display: flex;flex-direction: column;font-size: 36rpx;">
					<view class="title u-line-1" style="width: 50%;padding:10rpx 0">{{goodsDetail.name}}</view>
					<text class="type" style="color: #999;">白色 S</text>
					<view style="font-size: 24rpx;padding:20rpx">
						<text style="color:#f2f2f2;padding:5rpx 15rpx;background-color: #60b5ff;margin-right: 20rpx;border-radius: 20rpx;">7天无理由退货</text>
						<text style="color:#f2f2f2;padding:5rpx 15rpx;background-color: #60b5ff;border-radius: 20rpx;">7天可换</text>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="goods_pay">
			<view>
				<text>商品金额</text>
				<text>¥198.00</text>
			</view>
			
			<view>
				<text>总运费</text>
				<text>¥0.00</text>
			</view>
			
			<view>
				<text>优惠券</text>
				<text>-10.00</text>
			</view>
		</view>
		
		
		<view class="pay_type" @click="showPop(true)">
			<u-icon label="支付宝支付" color="#00aaff" size="60" name="zhifubao">支付宝</u-icon>
		</view>
		
		
		
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>198.00</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsDetail: {},
				site: {},
				
				show:false,
				password:''
			}
		},
		onLoad(option) {
			let that = this;
			console.log(option.goodsPictures, option.goodsName)
			this.goodsDetail = {
				name: option.goodsName,
				picture: option.goodsPictures
			}
			uni.getStorage({
			    key: 'storage_city',
			    success: function (res) {
					if(res.data.city) {
						res.data.city.forEach((item, index)=>{
							if(item.checked){
								if(item.tag==0) item.tag = '家'
								else if(item.tag==1) item.tag = '公司'
								else if(item.tag==2) item.tag = '学校'
								that.site = {
									id: item.id,
									name: item.name,
									phone: item.tel,
									tag: [
										{
											tagText: '默认'
										},
										{
											tagText: item.tag
										}
									],
									site: item.city+ "  "+item.detail
								}
							}
							
						})
					}
				}
			})
		},
		methods: {
			toAddress(){
				uni.navigateTo({
				    url: '/pages/index/submit/submit'
				});
			},
			
			
			onChange(val){
				if(this.password.length<6){
					this.password += val;
				}
				
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			pay(){
				uni.showLoading({
					title:'支付中'
				})
				
				setTimeout(()=>{
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon:'success',
						title:'支付成功'
					})
				},2000);
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			finish(){
				console.log(11111)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	
	
	.pay{
		background-color: #f8f8f8;
	}
	.goods_detail{
		margin:20rpx 0;
		height:250rpx;
		width: 100%;
		padding:30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		image{
			height:200rpx;
			width: 200rpx;
			border-radius: 10rpx;
		}
	}
	
	.goods_pay{
		padding:30rpx;
		background-color: #fff;
		view{
			display: flex;
			justify-content: space-between;
			padding:10rpx;
			text{
				
			}
		}
	}
	
	.pay_type{
		padding: 20rpx;
		background-color: #ffffff;
		margin:20rpx;
		border:1rpx solid #ddd;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
	}
.item {
	background-color: #fff;
	padding: 40rpx 30rpx;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color:rgb(49, 145, 253);
			}
			.red{
				background-color:red
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
</style>
